import ButtonBrowse from "./ButtonBrowse.tsx";
import MessageCard from "./MessageCard.tsx";
import {Article} from "../../model/Article.ts";

const HomeContainer = (props: { articles: Article[] }) => {

    const {articles} = props
    return (
        <div className="p-3" id="container-home">

            <div className="row-cols-auto" id="header-home">
                <h1 className="headline-large" id="h1-header">MyLib</h1>
                <p className="headline-small" id="p3-text">
                    The books that you need - all here
                </p>
                <ButtonBrowse/>


            </div>

            <div className="mt-5">

                <h1 className="ms-3 headline-medium">News & Launches</h1>
            </div>
            <div className="row row-cols-1 mt-0 row-cols-sm-2 row-cols-md-4 g-3 card-row">

                {

                    articles.map((article) => (
                        <MessageCard article={article}/>
                    ))
                }


            </div>

            <div className="mt-5">

                <h1 className="ms-3 headline-medium">From Users</h1>
            </div>

            <div className="row row-cols-1 mt-0 row-cols-sm-2 row-cols-md-4 g-3 card-row">


            </div>


        </div>


    )
}

export default HomeContainer